<template>
    <div>
        <el-table :data="tableData" style="width: 100%" row-key="id" border lazy :load="load"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column width="180" />
            <el-table-column prop="name" label="名称" width="180" />
            <el-table-column prop="mername" label="地址" width="320" />
            <el-table-column prop="tag" label="层级" width="150">
                <template #default="scope">
                    <el-tag v-if="scope.row.level == 1">
                        {{ scope.row.tag }}
                    </el-tag>
                    <el-tag v-if="scope.row.level == 2" type="success">
                        {{ scope.row.tag }}
                    </el-tag>
                    <el-tag v-if="scope.row.level == 3" type="warning">
                        {{ scope.row.tag }}
                    </el-tag>
                    <el-tag v-if="scope.row.level == 4" type="danger">
                        {{ scope.row.tag }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleDialogValue(scope.row)" v-if="scope.row.level == 3">添加影院
                    </el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row)" v-if="scope.row.level == 4">
                        删除影院</el-button>
                </template>
            </el-table-column>
        </el-table>
        <Dialog v-model="dialogVisible" :dialogTableValue="dialogTableValue" :dialogTitle="dialogTitle"
            v-if="dialogVisible" @initCinemaList="getRegionVOByLevelApi"></Dialog>
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { getRegionVOByLevel, loadRegionVOByPid } from '../../../../api/region';
import Dialog from './conponent/dialog/cinema-dialog.vue'
import { isNull } from '../../../../utils/filter'
import { ElMessage } from 'element-plus'
import { delCinema } from '../../../../api/cinema';

interface region {
    id: number
    name: string
    level: number
    mername: string
    tag?: string
    hasChildren?: boolean
    children?: region[]
}

interface ICinema {

}

let tableData = ref<region[]>()
let dialogVisible = ref(false)
let dialogTitle = ref('新增影院')
let dialogTableValue = ref({})

const getRegionVOByLevelApi = () => {
    tableData.value = []
    getRegionVOByLevel({ id: 1 }).then(res => {
        tableData.value = res.data.map((item: region) => {
            return {
                ...item,
                tag: item.level == 1 ? '一级' : item.level == 2 ? '二级' : item.level == 3 ? '三级' : '电影院'
            }
        })
    })
}

onMounted(() => {
    getRegionVOByLevelApi()
})

const load = (
    row: region,
    treeNode: unknown,
    resolve: (data: region[]) => void
) => {
    loadRegionVOByPid({ id: row.id }).then(res => {
        if(res.data.length == 0) return resolve([])
        resolve(res.data.map((item: region) => {
            return {
                ...item,
                tag: item.level == 1 ? '一级' : item.level == 2 ? '二级' : item.level == 3 ? '三级' : '电影院'
            }
        }))
    })
}

const handleAdd = (index: number, row: region) => {
    // addCinema(JSON.stringify(row)).then(res => {
    //     console.log(res);
    // })
}


const handleDialogValue = (row: region) => {
    dialogTitle.value = '新增影院'
    dialogTableValue.value = JSON.parse(JSON.stringify(row))
    dialogVisible.value = true
}

const handleDelete = async(row: region) => {
    await delCinema({ id: row.id }).then((res: any) => {
        if (res.code == 200) {
           ElMessage.success("删除成功")
        } else {
           ElMessage.error("删除失败")
        }
    })
    window.location.reload()
}

</script>